<template>
  <header>
    <h1>售后服务</h1>
  </header>
  <main>
    <section id="refund-policy">
      <h2>退款政策</h2>
      <p>我们提供以下退款政策：</p>
      <ul>
        <li>在收到商品后的30天内，如果您对商品不满意，我们将提供全额退款。</li>
        <li>商品必须保持原样，并且包装完整，我们才会接受退款申请。</li>
        <li>请注意，退款可能需要一些处理时间，请耐心等待。</li>
      </ul>
      <button class="accordion-btn" @click="ques1 = !ques1">了解更多关于退款政策</button>
      <div v-if="ques1" class="accordion-panel">
        <p>请联系客户服务获取退款表格，并将商品寄回我们指定的地址。退款将在收到商品并确认符合退款条件后，5个工作日内处理。</p>
      </div>
    </section>
    <section id="exchange-process">
      <h2>换货流程</h2>
      <p>如果您需要换货，请按以下步骤操作：</p>
      <ol>
        <li>联系我们的客服团队，告知您的订单号和需要换货的商品。</li>
        <li>我们将安排快递公司上门取件，并为您发送新商品。</li>
        <li>收到新商品后，请检查是否符合您的要求。</li>
        <li>如果有任何问题，请及时联系我们。</li>
      </ol>
      <button class="accordion-btn" @click="ques2 = !ques2">了解更多关于换货流程</button>
      <div v-if="ques2" class="accordion-panel">
        <p>请确保您需要换货的商品未使用，且包装完好。换货过程通常需要7-10个工作日。如果新商品无法满足您的需求，我们也可以为您办理退款。</p>
      </div>
    </section>
    <section id="repair-service">
      <h2>维修服务</h2>
      <p>我们提供以下维修服务：</p>
      <ul>
        <li>如果您的商品在保修期内出现质量问题，我们将免费为您提供维修服务。</li>
        <li>保修期根据商品类别和具体情况而定，具体详情请咨询客服。</li>
        <li>如果超出保修期，我们也可以为您提供有偿维修服务。</li>
      </ul>
      <button class="accordion-btn" @click="ques3 = !ques3">了解更多关于维修服务</button>
      <div v-if="ques3" class="accordion-panel">
        <p>请保留购买凭证，并在商品出现问题时及时联系客户服务。我们将安排维修团队与您联系，并为您提供快速的维修服务。</p>
      </div>
    </section>
    <section id="faq">
      <h2>常见问题</h2>
      <div class="faq-item">
        <button class="accordion-btn" @click="ques4 = !ques4">问题1：如何申请退款？</button>
        <div v-if="ques4" class="accordion-panel">
          <p>您可以在订单历史中找到相关订单，并点击“申请退款”按钮，按照提示填写退款申请。</p>
        </div>
      </div>
      <div class="faq-item">
        <button class="accordion-btn" @click="ques5 = !ques5">问题2：换货需要支付运费吗？</button>
        <div v-if="ques5" class="accordion-panel">
          <p>换货过程中，首次换货我们将承担运费。如果是二次换货或其他情况，可能需要您承担部分运费，具体详情请咨询客服。</p>
        </div>
      </div>
      <div class="faq-item">
        <button class="accordion-btn" @click="ques6 = !ques6">问题3：如何检查我的商品是否在保修期内？</button>
        <div v-if="ques6" class="accordion-panel">
          <p>请查阅您的购买凭证或在我们的网站上登录账号查看订单详情。保修期通常从购买日期开始计算。</p>
        </div>
      </div>
    </section>
  </main>
  <footer>
    <img src="../../assets/logo.png" alt="品优购" />
    <p>品优购 &copy; 2024</p>
  </footer>
</template>

<script setup>
import { ref } from 'vue'

const ques1 = ref(false)
const ques2 = ref(false)
const ques3 = ref(false)
const ques4 = ref(false)
const ques5 = ref(false)
const ques6 = ref(false)
</script>

<style scoped>
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f4f4f4;
}

header {
  background-color: #333;
  color: #fff;
  padding: 20px;
  text-align: center;
}

h1 {
  margin: 0;
}

main {
  padding: 20px;
}

section {
  margin-bottom: 30px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

h2 {
  color: #333;
}

ul,
ol {
  padding-left: 20px;
}

footer {
  color: #999;
  text-align: center;
  padding: 20px;
  margin-top: 30px;
  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
}

img {
  width: 500px;
  height: 100px;
  object-fit: cover;
}

/* Accordion styles */
.accordion-panel {
  padding: 10px;
}

.accordion-btn {
  background-color: #f4f4f4;
  color: #333;
  cursor: pointer;
  padding: 10px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: background-color 0.3s ease;
}

.accordion-btn:hover {
  background-color: #ddd;
}

.active {
  background-color: #ddd;
}

.faq-item {
  margin-bottom: 15px;
}
</style>
